@import '../node_modules/ckeditor5/dist/ckeditor5.css';

.ck-content span.marker {
  background: yellow;
}

.ck-content span.spoiler {
  background: #000;
  color: #000;
}

.ck-content span.spoiler:hover {
  background: #000;
  color: #fff;
}

.ck-sticky-panel__content_sticky {
  top: 4.2rem !important;
}

/* This selector targets the editable element (excluding comments). */
//.ck-editor__editable_inline:not(.ck-comment__input *) {
//  min-height: 21rem;
//  // overflow-y: auto;
//}

@include color-mode(dark) {
  .editor-container__editor,
  .ck-block-toolbar-button {
    --ck-color-base-foreground: var(--bs-card-bg);
    --ck-color-base-background: var(--bs-card-bg);
    --ck-color-base-border: var(--bs-card-border-color);
    --ck-color-base-action: hsl(104, 50.2%, 42.5%);
    --ck-color-base-focus: var(--bs-card-cap-bg);
    --ck-color-base-text: var(--bs-body-color);
    --ck-color-base-active: hsl(218.1, 100%, 58%);
    --ck-color-base-active-focus: var(--bs-card-cap-bg);
    --ck-color-base-error: hsl(15, 100%, 43%);

    /* -- Generic colors ------------------------------------------------------------------------ */

    --ck-color-focus-border-coordinates: 218, 81.8%, 56.9%;
    --ck-color-focus-border: hsl(var(--ck-color-focus-border-coordinates));
    --ck-color-focus-outer-shadow: var(--bs-card-cap-bg);
    --ck-color-focus-disabled-shadow: hsla(209, 90%, 72%, 0.3);
    --ck-color-focus-error-shadow: hsla(9, 100%, 56%, 0.3);
    --ck-color-text: var(--ck-color-base-text);
    --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.15);
    --ck-color-shadow-drop-active: hsla(0, 0%, 0%, 0.2);
    --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
    --ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry)
      var(--ck-color-focus-outer-shadow);
    --ck-color-split-button-hover-background: var(--bs-secondary-bg);
    --ck-color-split-button-hover-border: var(--bs-card-border-color);
    --ck-style-panel-button-label-background: var(--bs-secondary-bg);
    --ck-style-panel-button-hover-label-background: var(--bs-secondary-bg);
    --ck-color-block-toolbar-button: var(--bs-secondary-color);

    /* -- Buttons ------------------------------------------------------------------------------- */

    --ck-color-button-default-background: transparent;
    --ck-color-button-default-hover-background: var(--bs-card-cap-bg);
    --ck-color-button-default-active-background: var(--bs-card-cap-bg);
    --ck-color-button-default-disabled-background: transparent;

    --ck-color-button-on-background: var(--bs-card-cap-bg);
    --ck-color-button-on-hover-background: var(--bs-card-cap-bg);
    --ck-color-button-on-active-background: var(--bs-card-cap-bg);
    --ck-color-button-on-disabled-background: var(--bs-card-cap-bg);
    --ck-color-button-on-color: hsl(218.1, 100%, 58%);

    --ck-color-button-action-background: var(--ck-color-base-action);
    --ck-color-button-action-hover-background: hsl(104, 53.2%, 40.2%);
    --ck-color-button-action-active-background: hsl(104, 53.2%, 40.2%);
    --ck-color-button-action-disabled-background: hsl(104, 44%, 58%);
    --ck-color-button-action-text: var(--ck-color-base-text);

    --ck-color-button-save: hsl(120, 100%, 27%);
    --ck-color-button-cancel: hsl(15, 100%, 43%);

    --ck-color-switch-button-off-background: hsl(0, 0%, 57.6%);
    --ck-color-switch-button-off-hover-background: hsl(0, 0%, 49%);
    --ck-color-switch-button-on-background: var(
      --ck-color-button-action-background
    );
    --ck-color-switch-button-on-hover-background: hsl(104, 53.2%, 40.2%);
    --ck-color-switch-button-inner-background: var(--ck-color-base-background);
    --ck-color-switch-button-inner-shadow: hsla(0, 0%, 0%, 0.1);

    /* -- Dropdown ------------------------------------------------------------------------------ */

    --ck-color-dropdown-panel-background: var(--ck-color-base-background);
    --ck-color-dropdown-panel-border: var(--ck-color-base-border);

    /* -- Dialog -------------------------------------------------------------------------------- */

    --ck-color-dialog-background: var(--ck-custom-background);
    --ck-color-dialog-form-header-border: var(--ck-custom-border);

    /* -- Input --------------------------------------------------------------------------------- */

    --ck-color-input-background: var(--ck-color-base-background);
    --ck-color-input-border: var(--ck-color-base-border);
    --ck-color-input-error-border: var(--ck-color-base-error);
    --ck-color-input-text: var(--ck-color-base-text);
    --ck-color-input-disabled-background: hsl(0, 0%, 95%);
    --ck-color-input-disabled-border: var(--ck-color-base-border);
    --ck-color-input-disabled-text: hsl(0, 0%, 46%);

    /* -- List ---------------------------------------------------------------------------------- */

    --ck-color-list-background: var(--ck-color-base-background);
    --ck-color-list-button-hover-background: var(
      --ck-color-button-default-hover-background
    );
    --ck-color-list-button-on-background: var(--ck-color-button-on-color);
    --ck-color-list-button-on-background-focus: var(--ck-color-button-on-color);
    --ck-color-list-button-on-text: var(--ck-color-base-text);

    /* -- Panel --------------------------------------------------------------------------------- */

    --ck-color-panel-background: var(--ck-color-base-background);
    --ck-color-panel-border: var(--ck-color-base-border);

    /* -- Toolbar ------------------------------------------------------------------------------- */

    --ck-color-toolbar-background: var(--ck-color-base-background);
    --ck-color-toolbar-border: var(--ck-color-base-border);

    /* -- Tooltip ------------------------------------------------------------------------------- */

    --ck-color-tooltip-background: var(--ck-color-base-background);
    --ck-color-tooltip-text: var(--ck-color-base-text);

    /* -- Engine -------------------------------------------------------------------------------- */

    --ck-color-engine-placeholder-text: hsl(0, 0%, 44%);

    /* -- Upload -------------------------------------------------------------------------------- */

    --ck-color-upload-bar-background: hsl(209, 92%, 70%);

    /* -- Link -------------------------------------------------------------------------------- */

    --ck-color-link-default: hsl(240, 100%, 47%);
    --ck-color-link-selected-background: hsla(201, 100%, 56%, 0.1);
    --ck-color-link-fake-selection: hsla(201, 100%, 56%, 0.3);

    /* -- Search result highlight ---------------------------------------------------------------- */

    --ck-color-highlight-background: hsl(60, 100%, 50%);

    /* -- Generic colors ------------------------------------------------------------------------- */

    --ck-color-light-red: hsl(0, 100%, 90%);
  }
}
